import { Component, OnDestroy, OnInit } from '@angular/core';
import { EzFormConfiguration, EzFormValidators, EzInputConfiguration } from 'ng-easy-form-lib';
import { timer } from 'rxjs';
import { take, tap } from 'rxjs/operators';
import { NzMessageService } from 'ng-zorro-antd';

@Component({
  selector: 'ez-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less'],
})
export class LoginComponent implements OnInit, OnDestroy {
  username: EzInputConfiguration = {
    type: 'input',
    name: 'username',
    label: '用户名',
    placeholder: '请输入用户名',
    required: true,
    maxlength: 20,
    validators: [EzFormValidators.required],
  };

  password: EzInputConfiguration = {
    type: 'input',
    name: 'password',
    label: '密码',
    placeholder: '请输入密码',
    required: true,
    maxlength: 20,
    password: true,
    validators: [EzFormValidators.required, EzFormValidators.minlength(6, '密码长度不低于6')],
  };

  config: EzFormConfiguration = {
    cols: 1,
    buttonsFull: true,
    submitButtonText: '登录',
    resetButtonHidden: true,
    groups: [
      {
        title: null,
        name: 'loginForm',
        controls: [this.username, this.password],
      },
    ],
    onSubmit: form => {
      return timer(2000)
        .pipe(take(1))
        .pipe(tap(() => this.message$.success(`登录成功`)));
    },
  };

  constructor(private message$: NzMessageService) {}

  ngOnInit(): void {}
  ngOnDestroy(): void {}
}
